<template>
  <div class="imgBox">
    <div class="uploadingImg" v-for="(item, index) in urlList" :key="index">
      <img
        v-if="isFile"
        style="width: 126px; height: 126px"
        src="../../assets/file.png"
        alt="file"
        @click="previewImage(item)"
      />
      <img
        v-else
        style="width: 126px; height: 126px"
        :src="item"
        alt="avatar"
        @click="previewImage(item)"
      />
      <div class="preview-icon" @click="previewImage(item)">
        <a-icon type="eye" />
      </div>
      <div class="X" @click="del(index)"></div>
    </div>
    <a-upload
      :accept="accept"
      name="multipartFile"
      list-type="picture-card"
      class="avatar-uploader"
      :show-upload-list="false"
      action="http://114.132.184.120:8182/government-platform-center/common/uploadFile"
      :before-upload="beforeUpload"
      @change="handleChange"
      v-if="urlList.length != limit"
    >
      <div>
        <a-icon :type="loading ? 'loading' : 'plus'" />
        <div class="ant-upload-text">点击上传</div>
      </div>
    </a-upload>
  </div>
</template>
<script>
import fileUrl from "../../assets/file.png";
export default {
  // props: ['imageUrl'],
  props: {
    imageUrl: {
      type: String,
      default: "",
    },
    accept: {
      type: String,
      default: ".jpg,.png,.jpeg",
    },
    limit: { type: Number, default: 5 },
    isFile: { type: Boolean, default: false },
  },
  data() {
    return {
      fileUrl: fileUrl,
      loading: false,
      urlList: [],
    };
  },
  watch: {
    imageUrl: {
      handler(e) {
        if (e) {
          this.urlList = e.split(",");
        }
      },
      immediate: true,
    },
  },
  methods: {
    handleChange(info) {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 1000);
      info.file &&
        info.file.response &&
        this.urlList.push(info.file.response.data);
      this.$emit("getImg", this.urlList.join(","));
    },
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      // if (!isJpgOrPng) {
      //   this.$message.error('You can only upload JPG file!')
      // }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("Image must smaller than 2MB!");
      }
      const isLimit = this.urlList.length < 5;
      console.log(this.urlList.length);
      if (!isLimit) {
        this.$message.error(`最多上传${this.limit}张`);
        this.loading = false;
      }
      return isLt2M && isLimit;
    },
    previewImage(url) {
      window.open(url, "_blank");
    },
    del(index) {
      this.urlList.splice(index, 1);
      this.$emit("getImg", this.urlList.join(","));
    },
  },
};
</script>
<style lang="scss">
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
.imgBox {
  display: flex;
  gap: 20px;
  .uploadingImg {
    position: relative;

    img {
      cursor: pointer;
      transition: opacity 0.3s;

      &:hover {
        opacity: 0.8;
      }
    }

    .preview-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.5);
      color: white;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s;
      cursor: pointer;
      z-index: 99;

      &:hover {
        opacity: 1;
      }
    }

    &:hover .preview-icon {
      opacity: 0.8;
    }

    .X {
      position: absolute;
      width: 20px;
      height: 20px;
      right: -5px;
      top: -5px;
      background: url("../../assets/uploadX.png");
      background-size: 100% 100%;
      z-index: 999;
      cursor: pointer;
    }
  }
}
</style>
